<template>
  <view class="service-list-item">
    <view @tap.stop="goDetail" class="list-item flex-warp">
      <!-- #ifdef H5 -->
      <view class="cover radius-16">
        <view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${info.cover}')`}"></view>
      </view>
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
      <!-- #endif -->
      <view class="flex-1 ml-md" :style="{maxWidth:maxWidth}">
        <view :class="[{'flex-between':info.show_salenum}]">
          <view class="f-mini-title c-title text-bold ellipsis" :class="[{'max-270':info.show_salenum}]">
            {{ info.title }}</view>
          <view class="f-caption c-caption" v-if="info.show_salenum">{{ info.total_sale }}人已预约</view>
        </view>
        <view class="f-caption c-caption ellipsis" style="margin-top: 6rpx;">{{ info.sub_title || '' }}
        </view>
        <view class="flex-y-center f-caption c-caption"><i class="iconfont iconshijian"
            style="font-size:24rpx;margin-right: 5rpx;"
            :style="{color:primaryColor}"></i>{{info.time_long}}分钟
        </view>
        <view class="flex-between mt-sm">
          <view class="flex-y-center f-desc c-caption ellipsis"
            :style="{width:attendant_name.length===5?'240rpx':attendant_name.length===4?'260rpx':attendant_name.length===3?'280rpx':'300rpx'}">
            <view class="flex-y-baseline f-icontext c-warning mr-sm">¥<view class="f-sm-title">
                {{ info.price }}
              </view>
            </view>
            <view class="member-canbuy-level" v-if="info.member_info && info.member_info.title">
              <view class="text flex-center">{{info.member_info.title}}专享</view>
            </view>
          </view>
          <auth :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
            :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
            :style="{width:attendant_name.length===5?'200rpx':attendant_name.length===4?'180rpx':attendant_name.length===3?'160rpx':'140rpx'}">
            <view class="flex-between">
              <view></view>
              <view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
                {{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
              </view>
            </view>
          </auth>
        </view>
        <!-- <view class="flex-between mt-md">
          <view class="flex-y-center f-desc c-caption max-350 ellipsis">
            <view class="time-long flex-center">{{ info.time_long }}分钟</view>
            <view class="flex-y-baseline f-icontext c-warning mr-sm">¥<view class="f-sm-title">
                {{ info.price }}
              </view>
            </view>
            <view class="text-delete" v-if="info.init_price">¥{{ info.init_price }}</view>
          </view>
          <auth :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
            :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose" style="width:200rpx">
            <view class="flex-between">
              <view></view>
              <view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
                {{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
              </view>
            </view>
          </auth>
        </view> -->
      </view>
    </view>
  </view>
</template>
<script>
import {
  mapState,
  mapMutations
} from "vuex"

export default {
  components: {}, props: {
    from: { type: String, default() { return 'list' } },
    sid: { type: Number, default() { return 0 } },
    info: { type: Object, default() { return {} } },
    maxWidth: { type: String, default() { return '450rpx' } }
  }, data() {
    return {
      textType: {
        1: '可服务',
        2: '服务中',
        3: '可预约',
        4: '不可预约'
      },
    }
  }, computed: mapState( {
    primaryColor: state => state.config.configInfo.primaryColor,
    subColor: state => state.config.configInfo.subColor,
    attendant_name: state => state.config.configInfo.attendant_name,
    userInfo: state => state.user.userInfo,
  } ), methods: {
    goDetail() { // 详情
      let { id } = this.info
      let { sid: store_id = 0 } = this
      let url = `/user/pages/detail?id=${ id }&store_id=${ store_id }`
      this.$util.goUrl( { url } )
    }, toChoose() { // 选择技-师
      let { can_buy, title } = this.info.member_info
      if( !can_buy ) {
        let msg = title ? title.includes( '会员' ) ? title : `${ title }会员` : '会员'
        this.$util.showToast( { title: `您还不是${ msg }` } )
        return
      }
      let { from } = this
      if( from == 'technician-info' ) {
        this.$emit( 'order' )
        return
      }
      let { id } = this.info
      let { sid: store_id = 0 } = this
      let url = `/user/pages/choose-technician?id=${ id }&store_id=${ store_id }`
      this.$util.goUrl( { url } )
    }, toEmit( key ) {
      this.$emit( key )
    }
  }
}
</script>
<style scoped lang="scss">
.service-list-item {
  .list-item {
    .cover {
      width: 180rpx;
      height: 180rpx;
    }

    .time-long {
      min-width: 72rpx;
      height: 30rpx;
      padding: 0 5rpx;
      background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
      border-radius: 4rpx;
      font-size: 20rpx;
      color: #FFEEB9;
      margin-right: 16rpx;
    }

    .f-icontext {
      font-size: 18rpx;
    }

    .text-delete {
      font-size: 20rpx;
      color: #B9B9B9;
    }

    .item-btn {
      min-width: 130rpx;
      height: 52rpx;
      padding: 0 10rpx;
      border-radius: 8rpx;
    }
  }
}
</style>
